<template>
  <div style="height: 657px">
  </div>
</template>

<script>
import Format from '@/utils/format'

export default {
  props: ['monitorName'],
  data () {
    return {
      charts: '',
      // 位移
      shiftList: [],
      // 速度
      speedList: [],
      timerList: [],
      // 合成类型  AO  BO
      typeTitle: '',
      // 孔深
      depth: '',
    }
  },
  computed: {
    options () {
      function formatter (params, ticket, callback) {
        var contentArr = []
        for (var i = 0; i < params.length; i++) {
          var data = params[i]
          if (i === 0) {
            contentArr.push(data.name)
          }
          if (data.seriesName.indexOf('位移') >= 0) {
            contentArr.push(data.marker + data.seriesName + '：' + data.value + 'mm')
          } else {
            contentArr.push(data.marker + data.seriesName + '：' + data.value + 'mm/h')
          }
        }
        return contentArr.join('<br/>')
      }

      return {
        title: {
          text: '时间相对位移曲线',
          subtext: `${this.typeTitle}-孔深：${this.depth}m`,
          x: 'center'
        },
        tooltip: {
          trigger: 'axis',
          formatter: formatter,
          axisPointer: {
            animation: false
          }
        },
        legend: {
          data: ['位移', '速度'],
          x: 'left'
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        axisPointer: {
          link: { xAxisIndex: 'all' }
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            xAxisIndex: [0, 1],
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          },
          {
            type: 'inside',
            realtime: true,
            xAxisIndex: [0, 1]
          }
        ],
        grid: [
          {
            left: 50,
            right: 50,
            height: '35%',
            containLabel: false
          }, {
            left: 50,
            right: 50,
            top: '55%',
            height: '35%',
            containLabel: false
          }
        ],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: { onZero: true },
            data: this.timerList
          },
          {
            gridIndex: 1,
            type: 'category',
            boundaryGap: false,
            axisLine: { onZero: true },
            data: this.timerList,
            position: 'bottom'
          }
        ],
        yAxis: [
          {
            name: '位移(mm)',
            type: 'value'
          },
          {
            gridIndex: 1,
            name: '速度(mm/h)',
            nameLocation: 'start',
            type: 'value',
            inverse: true
          }
        ],
        series: [
          {
            name: '位移',
            type: 'line',
            symbolSize: 8,
            hoverAnimation: false,
            data: this.shiftList
          },
          {
            name: '速度',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            symbolSize: 8,
            hoverAnimation: false,
            data: this.speedList
          }
        ]
      }
    }
  },
  methods: {
    // type: AB AO BO
    // typeTitle  合成类型  AO  BO
    updateEchart (list, type, typeTitle, depth) {
      this.typeTitle = typeTitle
      this.depth = depth
      // 定义三组字段key
      const keyMap = {
        AB: ['relativeSynthesis', 'speedSynthesis'],
        AO: ['relativeA0', 'speedA0'],
        BO: ['relativeB0', 'speedB0'],
      }
      const keys = keyMap[type]
      this.shiftList = list.map(x => x[keys[0]])
      this.speedList = list.map(x => x[keys[1]])
      this.timerList = list.map(x => Format(new Date(x.createTime)))
      this.charts.setOption(this.options)
      this.charts.resize()
    },
    // echart随着窗口改变
    echartResize () {
      this.charts.resize()
    }
  },
  mounted () {
    const Echarts = require('echarts')
    this.charts = Echarts.init(this.$el, null, { locale: 'ZH' })
    window.addEventListener('resize', this.echartResize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.echartResize)
  }
}
</script>
